<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的社群</title>
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <script src="{$Think.config.RESOURCEURL}wx_assets/personCenter/js/mediaQuery.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type='text/javascript' src='{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}'></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
    <style>

        article {
            background: #efeff4;
            height: 100%;
        }

        h3 {
            font-size: .3rem;
            height: .75rem;
            line-height: .75rem;
            color: #fff;
            background: #ff9900;
            text-align: center;
            position: fixed;
            top: 0;
            width: 100%;
            left: 0;
            z-index: 3;
        }

        h3 a.goback {
            display: inline-block;
            position: absolute;
            height: .75rem;
            width: .7rem;
            left: 0;
            background: url({$Think.config.RESOURCEURL}wx_assets/commune/images/new_sj.png{$Think.config.RESOURCE_VER}) center center no-repeat;
            background-size: .17rem .32rem;
        }

        h3 a.new {
            display: inline-block;
            position: absolute;
            right: .2rem;
            font-size: .24rem;
            color: #fff;
            text-decoration: underline;
            height: .75rem;
            line-height: .75rem;
        }
        ul {
            margin-top: .75rem;
        }
        ul li {
            position: relative;
            height: 1.2rem;
            line-height: 1.2rem;
            font-size: .26rem;
            color: #757575;
            background: #fff url({$Think.config.RESOURCEURL}wx_assets/commune/images/my_jt.png{$Think.config.RESOURCE_VER}) 96% center no-repeat;
            background-size: .38rem .38rem;
            border-bottom: 1px solid #ccc;
        }
        ul li em {
            display: inline-block;
            width: .7rem;
            height: .69rem;
            vertical-align: middle;
            margin: 0 .2rem;
            background: url({$Think.config.RESOURCEURL}wx_assets/commune/images/my_group.png{$Think.config.RESOURCE_VER}) center no-repeat;
            background-size: .7rem .69rem;
        }
        ul li i {
            height: 12px;
            line-height: 12px;
            font-size: 14px;
            max-width: 63%;
            display: inline-block;
            word-wrap: break-word;
        }
        ul li span {
            display: inline-block;
            min-width: 24px;
            color: #ff9900;
            border-radius: 6px;
            height: 12px;
            line-height: 12px;
            border: 1px solid #ff9900;
            font-size: 12px;
            text-align: center;
            margin-left: 6px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
        }
        .noMassage{
            text-align: center;
            font-size: .3rem;
            line-height: 1rem;
            color:#919191;
        }
        .data-loading,.data-end{
            font-size:16px;
        }
    </style>
</head>
<body>
<article>
    <h3>
        <a href="javascript:history.go(-1);" class="goback"></a>
        我的社群
        <a href="{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&module=commune&method=communeIndex" class="new">添加</a>
    </h3>
    <ul id="quns">
    </ul>
</article>
<script type="text/html" id="Tpl">
    <%if(results){%>
    <%for(var i=0;i<results.length;i++){
    var qun = results[i];
    %>
    <li onclick ="quns.toDetail(<%=qun.id%>)">
        <em></em>
        <i><%=qun.groupName%></i>
        <span><%=qun.countNumber%></span>
    </li>
    <%}}else{%>
    <div class="noMassage">请添加社群</div>
    <%}%>
</script>
<script>
    var baseUrl = '{$Think.config.SERVER_HOST}';
    var url = "{$Think.config.SERVER_HOST}call.json?customerId={$customerId}";
    var quns={
        pageSize:10,
        page:0,
        pageCount:0,
        init:function(){
            var me=this;
            this._initEvent();
            $.util.pageLoading.show();
            me._loadList(me.page,function(){
                $.util.pageLoading.hide();
            });
        },
        _initEvent:function(){
            var me=this;
            $.util.initDataLoading({
                me:quns,
                lastChildren:function(){
                    return $("#quns li:last");
                },
                page:function(){
                    return quns.page;
                },
                pageCount:function(){
                    return quns.pageCount;
                }
            });
        },
        _renderList:function(data,page,callback){
            var me=this;
            if(data){
                var html=template("Tpl", data),
                        container = $("#quns");
                if(page==0){
                    $(".data-end").hide();
                    $(".data-loading").hide();
                    container.html(html);
                }else{
                    container.append(html);
                }
                me.page=page+quns.pageSize;
                me.pageCount=data.total;
                callback && callback();
            }
        },
        _loadList:function(page,callback){
            var me=this;
            var data={
                "start":page,
                "limit":quns.pageSize
            };
            $.ajax({
                type: 'post',
                url: url,
                dataType: 'json',
                data:{
                    'module':"commune",
                    "method":"communeGroupList",
                    "params":JSON.stringify(data)
                },
                success: function(data){
                    if(data){
                        me._renderList(data,page,callback);
                    }
                    $.util.pageLoading.hide();
                },
                error: function(xhr, type){
//            alert('Ajax error!')
                }
            })
        },
        toDetail:function(id){
            var params = {"id":id};
            params=encodeURIComponent(JSON.stringify(params));
            location.href= baseUrl+'call.html?customerId={$customerId}&module=commune&method=communeGroupInfo&params='+params;
        }
    }
    quns.init();
</script>
</body>
</html>